<template>
	<view class="test-alova-page">
		<wd-button @click="getData">获取数据</wd-button>
		<view>
			<wd-button :loading="loading" @click="getData2">获取数据（useRequest-推荐）</wd-button>
			<view>返回：{{data}}</view>
		</view>
		<wd-button @click="onViewList">列表例子</wd-button>
		<wd-button @click="onViewListUse">分页封装（usePaginationRequest）</wd-button>
		
		<view class="title">特点</view>
		<view class="item">1.对请求封装，适配各种请求（axios、fetch、uni-app）</view>
		<view class="item">2.响应式，符合Vue3的组合式开发模式</view>
		<view class="item">3.请求缓存（可以关闭）</view>
	</view>
</template>

<script lang="ts" setup>
	import { alovaInstance } from '@/common/request';
	import { useRequest } from 'alova/client';
	import {ref} from 'vue'

 	async function getData() {
		const t = Date.now()
		/**
		 * 若无async/await，则必须添加.send()才发送
		 * 原因：其是定义一个对象，没有发起请求
		 * 官方解析：https://alova.js.org/zh-CN/tutorial/getting-started/basic/method
		 */
		//
		const response  = await alovaInstance.Get('demo1?_t='+ t);
		console.log('数据返回',response)
	}
	
	//推荐
	const { loading, data, error, send } = useRequest(() => 
		alovaInstance.Get('/demo1'), 
		{ immediate: false }//非立即请求
	);
	function getData2() {
		send(); // 触发请求
	}
	
	//列表例子
	function onViewList(){
		uni.navigateTo({
			url:'/pages/test/alova/alovaList'
		})
	}
	function onViewListUse(){
		uni.navigateTo({
			url:'/pages/test/alova/alovaPage'
		})
	}
</script>


<style lang="scss">
	.test-alova-page {
		padding: 10px;
		.title{
			margin-top: 10px;
			font-size: 18px;
			font-weight: bold;
		}
	}
</style>